<template>
  <div class="app-container">
    <el-menu
      :collapse="getCollapse"
      :default-active="(getActiveRoute === null || '')?null:getActiveRoute.route_name"
      active-text-color="#4EEE94"
      background-color="#324157"
      mode="vertical"
      text-color="#bfcbd9"
      unique-opened
    >
      <el-submenu :index="item.icon" :key="item.icon" v-for="item in menus">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item
          :index="sub.route_name"
          :key="sub.route_name"
          @click="goRouteByName(sub)"
          class="side-submenu"
          v-for="sub in item.subs"
        >
          {{ sub.title }}
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
	//import EventBus from "@/bus";
	import {mapActions, mapGetters} from 'vuex'


	export default {
		name: 'SideBar',
		data() {
			return {
				// 左侧菜单数据
				'menus': []
			}
		},
		methods: {
			// 1
			...mapActions('user', ['setActiveRoute']),
			// 1
			...mapActions('user', ['addKeepAlive']),
			// 获得菜单数据
			getFrame() {
				this.$api.frame.frame().then(
					(res) => {
						if (res.status === 200) {
							this.menus = res.data.data
						}
					}
				)
			},
			goRouteByName(menu) {
				// 1. 跳到对应了路由上
				this.$router.push({name: menu.route_name})
				// 2. 添加该item对象对keepalive里面
				this.addKeepAlive(menu)
				// 3. 设置激活菜单信息
				this.setActiveRoute(menu)
			}
		},
		computed: {
			// 1
			...mapGetters('settings', ['getCollapse']),
			...mapGetters('user', ['getActiveRoute'])
		},
		created() {
			// axios获得菜单列表
			this.getFrame()
		}

	}
</script>

<style lang="scss" scoped>
  .app-container {
    .el-menu {
      height: 100%;

      .side-submenu {
        min-width: 199px;
      }
    }
  }

  .side-collapse {

  }

  .side-no-collapse {

  }
</style>
